<template>
  <div>
    <div v-for="(item, idx) in list" :key="idx" class="list-data">
      <div class="top">
        <div class="top-name">
          <div>{{ item.name }}</div>
          <div>{{ item.correlations }}</div>
        </div>
        <div class="top-edit">
          <van-icon class="one" name="edit" @click="clickEdit(item)" />
          <van-icon class="two" name="delete-o" @click="clickDelete(item.name)" />
        </div>
      </div>
      <div class="topTwo">
        <div>{{ item.age }}</div>
        <div> {{ item.mobile }}</div>
      </div>
      <div class="topThree">
        <div>工作单位</div>
        <div>{{ item.workUnit }}</div>
      </div>
      <div class="bottom">
        <div>备注</div>
        <div>{{ item.remarks?item.remarks:'无' }}</div>
      </div>
    </div>
    <family-form ref="familyForm" @personValue="personValue" />
  </div>
</template>
<script>
import familyForm from './family-form.vue'
import Dialog from '@/wxcomponents/vant/dialog/dialog'
export default {
  components: { familyForm },
  props: {
    familyList: {
      type: Array,
    },
  },
  data() {
    return {
      list: this.familyList,
    }
  },
  watch: {
    familyList: {
      handler(newVal, oldVal) {
        this.list = newVal
      },
    },
  },
  methods: {
    clickEdit(item) {
      this.$refs.familyForm.edit(item)
    },
    personValue(item) {
      if (!item.isEdit) {
        this.list.push(item)
      }
      this.$emit('personList', this.list)
    },
    clickDelete(name) {
      Dialog.confirm({
        title: '标题',
        message: '确定删除？',
      }).then(() => {
        for (const [idx, item] of this.list.entries()) {
          if (name === item.name) {
            this.list.splice(idx, 1)
          }
        }
        this.$emit('personList', this.list)
      }).catch(() => {
        console.log('取消')
      })
    },
    open() {
      this.$refs.familyForm.open()
    },
  },
}
</script>
<style lang="scss">
.list-data{
    width: 93%;
    height:125px;
    box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.06);
    border-radius: 2px;
    margin: 10px auto;
    .top{
        display: flex;
        justify-content: space-between;
        padding: 10px 10px 5px 10px;
        .top-name{
            display: flex;
            align-items: center;
            div:nth-child(1){
                color:#333;
                font-size: 16px;
                font-weight: 600;
            }
            div:nth-child(2){
                font-size: 14px;
                color:#739ECA;background:#f1f5f9;
                border:1px solid #b2c9e2;
                margin-left: 10px;
                height: 16px;
                line-height: 16px;
                padding: 0px 3px;
            }
        }
        .top-edit{
            .one{
                color:#739ECA
            }
            .two{
                color:red;
                margin-left:5px;
            }
        }
    }
    .topTwo{
        display: flex;
        font-size: 12px;
        color: #999;
        padding: 0px 10px 0px 10px;
        height: 13px;
        line-height: 13px;
        div:nth-child(1){
            border-right: 1px solid #d7d7d7;
            padding-right:5px;
        }
        div:nth-child(2){
            padding-left:5px;
        }
    }
    .topThree,.bottom{
        display: flex;
        justify-content: space-between;
        padding: 10px 10px 5px 10px;
        font-size: 14px;
        color:#333;
    }
}
</style>
